<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绘制棋子</title>		
		<style>
			#myca{background-color: burlywood;}
		</style>
	</head>
	<body onload="drawBoard(myca)">
		<canvas id="myca" width=560	height=560 style="border: solid blue;" ></canvas>
		<script>
		    var can=document.getElementById("myca");
			var ctx=can.getContext("2d");
			var flag=true;
			function drawBoard(id){
				for (let i=0;i<20;i++) {
					ctx.moveTo(0,i*30);
					ctx.lineTo(540,i*30);
					ctx.moveTo(i*30,0);
					ctx.lineTo(i*30,540);
				}
				ctx.stroke();
				ctx.lineWidth="6";
				ctx.strokeRect(0,0,540,540);
			}
			can.addEventListener("mousedown",draw,false)
			function draw(e){
				//console.log("mousedown");//检测用
		        
				//1）丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
				//可以清除点之间的连线
				ctx.beginPath();
			    //2）棋子的定位
				var x,y;				
				if(e.offsetX%30<15){
					x=e.offsetX-(e.offsetX%30);
				}else{
					x=e.offsetX-(e.offsetX%30)+30;
				}
				if(e.offsetY%30<15){
					y=e.offsetY-(e.offsetY%30);
				}else{
					y=e.offsetY-(e.offsetY%30)+30;
				}
				//3）绘制棋子
				ctx.arc(x,y,13,0,Math.PI*2,false);
				var gw=ctx.createRadialGradient(x-2,y-2,2,x,y,13);
					gw.addColorStop(0,"#fafafa");
					gw.addColorStop(0.5,"#ececec");
					gw.addColorStop(1,"#d9d9d9");
				var gb=ctx.createRadialGradient(x-2,y-2,2,x,y,13);
					gb.addColorStop(0,"#c1c1c1");
					gb.addColorStop(0.5,"#4b4b4b");
					gb.addColorStop(1,"#090909");
				if(flag){
					ctx.fillStyle=gb;flag=!flag;
					}else{
						ctx.fillStyle=gw;
						flag=!flag;
					}				
				//ctx.fillStyle="black";
				ctx.fill();
				//ctx.stroke();
			}
					/*使用反模式方法，教材P.195
					can.onmousedown=function(e){
						console.log("mousedown");//检测用
						ctx.beginPath();
						ctx.arc(e.offsetX,e.offsetY,13,0,Math.PI*2,false);
						ctx.fill();
					};*/
			</script>
	</body>
</html>
